<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>折线图</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/highcharts/highcharts.js"></script>
		<script type="text/javascript" src="../js/highcharts/modules/exporting.js"></script>
	</head>
	<script type="text/javascript">
		$(function() {
			$('#container').highcharts({
				title: {
					text: '各城市各月份温度表',
					x: -20 //center
				},
				subtitle: {
					text: 'Source: WorldClimate.com',
					x: -20
				},
				exporting:{
					enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
				},
				xAxis: {
					categories: ['一月', '二月', '三月', '四月', '五月', '六月','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
				},
				yAxis: {
					title: {
						text: '温度 (°C)'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}]
				},
				tooltip: {
					valueSuffix: '°C'
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle',
					borderWidth: 0
				},
				
				  series : [{   
                name : 'Random data',   
                data : (function() {   
                    var data = [],   
                    i;   
                    $.ajax({  
                        type : "POST",  
                        url : "data.json",  
                        async : false, // 很关键默认情况下是异步的 所以必须加上这个参数把它设置为false；  
                        dataType : "json",  
                        success : function(json){      
                            for (i = 0; i <json.valueList.length; i++) {   
                                data.push({   
                                    x : i,   
                                    y : json.valueList[i]   
                                });   
                            }  
                        },  
                        error : function(result) {  
                            alert("json got problem from the file");  
                        }  
                    });   
                    return data;   
                })()   
            }]   
				
				 series : [{   
                name : 'Random data',   
                data : (function() {   
                    var data = [],   
                    var i;   
                    $.ajax({  
                        type : "POST",  
                        url : "data.json",  
                        async : false, // 很关键默认情况下是异步的 所以必须加上这个参数把它设置为false；  
                        dataType : "json",  
                        success : function(json){      
                            for (i = 0; i <json.valueList.length; i++) {   
                                data.push({   
                                    x : i,   
                                    y : json.valueList[i]   
                                });   
                            }  
                        },  
                        error : function(result) {  
                            alert("json got problem from the file");  
                        }  
                    });   
                    return data;   
                })()   
            }]   
			});
			
		});
	</script>

	<body>
		<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</body>

</html>